<template>
  <ul class="tabbar">
    <router-link to="/index" class="tabbar-item">
      <img
        src="../assets/img/coffee.png"
        v-show="$route.meta.index != 0"
        alt=""
      />
      <img
        src="../assets/img/coffee-active.png"
        v-show="$route.meta.index == 0"
        alt=""
      />
      <span>首页</span>
    </router-link>
    <router-link to="/menu" class="tabbar-item">
      <img
        src="../assets/img/beizi.png"
        alt=""
        v-show="$route.meta.index != 1"
      />

      <img
        src="../assets/img/beizi-active.png"
        alt=""
        v-show="$route.meta.index == 1"
      />
      <span>菜单</span>
    </router-link>
    <router-link to="/order" class="tabbar-item">
      <img
        src="../assets/img/order.png"
        alt=""
        v-show="$route.meta.index != 2"
      />
      <img
        src="../assets/img/order-active.png"
        alt=""
        v-show="$route.meta.index == 2"
      />
      <span>订单</span>
    </router-link>
    <router-link to="/shopcart" class="tabbar-item">
      <img
        src="../assets/img/cart.png"
        alt=""
        v-show="$route.meta.index != 3"
      />
      <img
        src="../assets/img/cart-active.png"
        alt=""
        v-show="$route.meta.index == 3"
      />
      <span>购物袋</span>
    </router-link>
    <router-link to="/mine" class="tabbar-item">
      <img
        src="../assets/img/mine.png"
        alt=""
        v-show="$route.meta.index != 4"
      />
      <img
        src="../assets/img/mine-active.png"
        alt=""
        v-show="$route.meta.index == 4"
      />
      <span>我的</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: "Tabbar",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
$color: #eaf0f7;
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 49px;
  font-size: 12px;
  border-top: 1px solid #e4e4e4;
}
.tabbar-item {
  flex: 1;
  line-height: 150%;
  text-align: center;
  img {
    width: 20px;
    margin: 0 auto 4px;
  }
}
</style>